<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-button size="mini" icon="el-icon-search" class="filter-item" @click="getPage()">{{ '搜索'
      }}</el-button>

    </div>

    <!-- 列表相关区域 -->
    <el-table v-loading="pageLoading" :data="pageVO.list" border fit highlight-current-row style="width: 100%;">
      <!-- 资源关联菜单 -->
      <el-table-column label="关联菜单" prop="menuTitle" align="center">
        <template slot-scope="{row}">
          <span>{{ row.menuTitle }}</span>
        </template>
      </el-table-column>
      <!-- 资源名称 -->
      <el-table-column label="资源名称" prop="name" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <!-- 权限对应的编码 -->
      <el-table-column label="权限编码" prop="permission" align="center">
        <template slot-scope="{row}">
          <span>{{ row.permission }}</span>
        </template>
      </el-table-column>
      <!-- 资源对应服务器路径 -->
      <el-table-column label="服务器路径" prop="uri" align="center">
        <template slot-scope="{row}">
          <span>{{ row.uri }}</span>
        </template>
      </el-table-column>
      <!-- 请求方法 -->
      <el-table-column label="请求方法" prop="method" align="center">
        <template slot-scope="{row}">
          <span>{{ ['', 'GET', 'POST', 'PUT', 'DELETE'][row.method] }}</span>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total > 0" :total="pageVO.total" :page.sync="pageQuery.page" :limit.sync="pageQuery.size"
      @pagination="getPage()" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import * as api from '@/api/rbac/menu-permission'

export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      // 查询的参数
      pageQuery: {
        page: 1,
        size: 10
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
      },
      // loading
      pageLoading: true,
      // 查询参数
      searchParam: {
      },
      addOrUpdateVisible: false
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {
    getPage() {
      this.pageLoading = true
      api.page({ ...this.pageQuery, ...this.searchParam }).then(({ data }) => {
        this.pageVO = data
        this.pageLoading = false
      })
    }
  }
}
</script>
